<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<#--<script type="text/javascript" src="/js/bootstrap.js"></script>-->
    <script type="text/javascript" src="/laydate/laydate.js"></script>
    <script type="text/javascript" src="/js/vue/vue.min.js"></script>

    <style type="text/css">
        input.error, textarea.error {
            border: 1px solid red;
        }

        #formDiv {
            margin-top: 50px;
            width: 900px;
            position: relative;
            left: 15%;
            display: none;
        }

        #addButton {
            position: relative;
            right: 44%;
        }

        #fontCounts {
            width: 500px;
            text-align: right;
            font-size: 0.8em;
            letter-spacing: 1px;
            line-height: 0.8em;
            padding-right: 20px;
            margin-top: 2px;
        }

        .fonts {
            color: deepskyblue;
        }

        #fontss {
            color: red;
        }
    </style>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <section class="panel">
                        <header class="panel-heading">
                            新增案件信息
                        </header>
                        <div style="width:900px;margin:20px auto;text-align: center;">
                            <p>客户信息查询</p>
                            <label for="searchText">车牌号:</label>
                            <input id="searchText" type="text"/>&nbsp;&nbsp;<input id="search" class="btn btn-info"
                                                                                   type="button"
                                                                                   value="查询"/><br/>
                            <span id="msg""></span>
                            <div id="app">
                                <div id="formDiv">
                                    <form id="addCaseForm" class="form-horizontal" role="form" action="/case/addCase"
                                          method="post">
                                        <div v-for="(item,index) in result1">
                                            <div class="form-group">
                                                <label for="sname" class="col-sm-2 control-label">投保人:</label>
                                                <div class="col-sm-10">
                                                    <input type="hidden" id="suId" name="order.user.suId"
                                                           :value="item.user.suId"/>
                                                    <input type="text" class="my form-control" readonly="readonly"
                                                           :value="item.user.sname" id="sname"
                                                           style="width: 400px;">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="oid" class="col-sm-2 control-label">保单号:</label>
                                                <div class="col-sm-10">
                                                    <input type="hidden" id="ouid" name="order.ouid"
                                                           :value="item.ouid"/>
                                                    <input type="hidden" id="combrate" :value="item.combo.combrate"/>
                                                    <input type="hidden" id="carUuid" name="cars.carUuid"
                                                           :value="item.cars.carUuid"/>
                                                    <input type="hidden" id="carPrice" :value="item.cars.price"/>
                                                    <input type="hidden" value="${emp.empName}" name="emp.empName"/>
                                                    <input type="hidden" value="${emp.euuId}" name="emp.euuId"/>
                                                    <input type="text" class="case form-control" id="oid"
                                                           name="order.oid"
                                                           :value="item.oid" readonly="readonly"
                                                           style="width: 400px;">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="comboname" class="col-sm-2 control-label">套餐类别:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" readonly="readonly"
                                                           id="comboname"
                                                           :value="item.combo.combname" style="width: 400px;">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="licenseNum" class="col-sm-2 control-label">出险车辆车牌号:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" name="cars.licenseNum"
                                                           :value="item.cars.licenseNum" required="required"
                                                           readonly="readonly"
                                                           id="licenseNum"
                                                           style="width: 400px;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="caseLocation" class="col-sm-2 control-label">案发地点:</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" autocomplete="off"
                                                       id="caseLocation"
                                                       name="caseLocation"
                                                       style="width: 400px;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="caseTime" class="col-sm-2 control-label">出险时间:</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="caseTime" autocomplete="off"
                                                       name="caseTime"
                                                       style="width: 400px;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="reportTime" class=" col-sm-2 control-label">报案时间:</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="reportTime"
                                                       autocomplete="off"
                                                       name="reportTime"
                                                       style="width: 400px;">
                                            </div>
                                        </div>

                                        <div id="inss" class="form-group">
                                            <input type="hidden" value="" id="rate"/>
                                            <label for="insurname" class="col-sm-2 control-label">选择涉险种类:</label>
                                            <div id="payDiv" class="col-sm-10" style="text-align: left">
                                                <p v-for="(item,index) in result">
                                                    <input class="money" :id="item.iuuid" type="checkbox"
                                                           :value="item.insurprice*item.comrate"
                                                           @click="clickEvent();"/>&nbsp;&nbsp;&nbsp;<label
                                                        :for="item.iuuid">{{item.insurname}}</label></p>
                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <label for="payAccount" class="col-sm-2 control-label">申赔金额:</label>
                                            <div class="col-sm-10">
                                                <input type="text" class=" form-control" autocomplete="off"
                                                       id="payAccount" name="payAccount" readonly="readonly"
                                                       style="width: 400px;">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="remarks" class="col-sm-2 control-label">案情备注:</label>
                                            <div class="col-sm-offset-2 col-sm-10">
                                                   <textarea class="my form-control" rows="8" id="remarks"
                                                             name="remarks"
                                                             style="resize: none;width: 500px;"></textarea>
                                                <div id="fontCounts">您还可以输入<span class="fonts">500</span>字</div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button id="addButton" type="submit" class="btn btn-success">确认添加
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    <#include "foot.ftl"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script type="text/javascript">

    $(function () {
        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                $("#search").click();
            }
        });
        $("#remarks").keyup(function () {
            var fontLength = $("#remarks").val().length;
            if (fontLength <= 500) {
                $("#fontCounts").html("您还可以输入<span class='fonts'>" + (500 - fontLength) + "</span>字");
            } else {
                $("#fontCounts").html("字数超过限制,已超出<span id='fontss'>" + (fontLength - 500) + "</span>字");
            }
        });
    });


    function isPlateNo(plateNo) {
        var re = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/;
        if (re.test(plateNo)) {
            return true;
        }
        return false;
    }

    jQuery.validator.addMethod("isNumber", function (value, element) {
        return this.optional(element) || /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value);
    }, "匹配数值类型，包括整数和浮点数");
    /* $.validator.addMethod("regex", function(value, element, param) {
         var exp = new RegExp(param);
         return exp.test(value);
     },"格式错误");*/
    jQuery.validator.addMethod("chinese", function (value, element) {
        return this.optional(element) || /[\u4e00-\u9fa5]+\d*$/.test(value);
    }, "只能输入中文或中文和数字");

    jQuery.validator.addMethod("compare", function (value, element, param) {
        var beginDate = jQuery(param).val();
        var beginTime = Date.parse(beginDate);
        var endTime = Date.parse(value);
        return ((endTime - beginTime) / (1000 * 60 * 60 * 24)) > 0 && ((endTime - beginTime) / (1000 * 60 * 60 * 24)) < 2;
    }, "报案时间不能小于出险时间且报案时间不能超过出险时间两天");

    $(function () {
        function check() {
            return $("#addCaseForm").validate({
                rules: {
                    caseLocation: {
                        required: true,
                        chinese: true,
                        minlength: 2
                    },
                    caseTime: {
                        required: true
                    },
                    reportTime: {
                        required: true,
                        compare: "#caseTime"
                    },
                    payAccount: {
                        required: true,
                        isNumber: true
                    },
                    remarks: {
                        required: true,
                        rangelength: [1, 500]
                    }
                }, messages: {
                    caseLocation: {
                        required: "必填字段",
                        chinese: "只能输入中文或中文和数字",
                        minlength: "不能少于两个字"
                    },
                    caseTime: {
                        required: "必填字段"
                    },
                    reportTime: {
                        required: "必填字段",
                        compare: "报案时间不能小于出险时间,报案时间不能超过出现时间两天"
                    },
                    payAccount: {
                        required: "请先选择涉险种类",
                        isNumber: "得赔钱啊"
                    },
                    remarks: {
                        required: "必填字段",
                        rangelength: "字数不能超过500..."
                    }
                }
            });
        }

        $("#addButton").click(function () {
            $("#caseLocation").val($.trim($("#caseLocation").val()));
            $("#remarks").val($.trim($("#remarks").val()));
            if (!check().form()) {
                return;
            }
        });
    });

    var app = new Vue({
        el: '#app',
        data: {
            result: [],
            result1: []

        }
    });
    var clickEvent = function () {
        $("#payDiv").find("#msg").remove();
        var payAccount = 0;
        var i = 0;
        $.each($(".money:checked"), function () {
            payAccount += parseFloat($(this).val());
            i += 1;
        });
        if (i == 0) {
            $("#payAccount").val('');
            $("#payDiv").append("<p id='msg' style='color:red'>请选择涉险种类</p>");
        } else {
            $("#payAccount").val(payAccount * $("#combrate").val() * $("#rate").val());
        }
    };
    laydate.render({
        elem: '#caseTime',
        type: 'datetime',
        them: 'molv',
        format: 'yyyy-MM-dd HH:mm:ss'
    });
    laydate.render({
        elem: '#reportTime',
        type: 'datetime',
        them: 'molv',
        format: 'yyyy-MM-dd HH:mm:ss'
    });

    $(function () {
        $("#search").click(function () {
            if ($("#formDiv").css("display")=="block" &&$("#searchText").val() != "" && ($("#searchText").val() == $("#licenseNum").val())) {
                return;
            } else {
                app.result=null;
                app.result1=null;
                $("#formDiv").css("display", "none");
                $("#payAccount").val("");
                $("#app").find("p").remove();
                if ($("#searchText").val() == "") {
                    $("#searchText").css("border-color", "red");
                    $("#msg").html("车牌号不能为空").css("color", "red");
                    $("#formDiv").css("display", "none");
                    return;
                } else if (!isPlateNo(($("#searchText").val()).trim())) {
                    $("#msg").html("输入的车牌号格式不正确").css("color", "red");
                    $("#formDiv").css("display", "none");
                } else {
                    $("#searchText").css("border-color", "");
                    $("#msg").html("");
                    $.ajax({
                        type: 'POST',
                        url: '/order/orderInfo',
                        dataType: 'json',
                        async: true,
                        data: {
                            licenseNum: ($("#searchText").val()).trim()
                        },
                        success: function (data) {
                            app.result1 = data.orderList;
                            if (app.result1.length == 0) {
                                $("#app").find("p").remove();
                                $("#formDiv").css("display", "none");
                                $("#app").append("<p>该车辆未在我公司购买保险</p>").css({
                                    "line-height": "1.5em",
                                    "margin-top": "10px"
                                });
                            } else {
                                app.result = data.insurcateList;
                                $("#rate").val(data.rate);
                                $("#app").find("p").remove();
                                $("#formDiv").css("display", "block");

                            }
                        }
                    });

                }
            }
        });
    });
</script>
